<template>
	<view class="container">
		<u-navbar :is-back="false">
			<view class="flex-bettwen w100 padding-lr30">
				<view class="">
					<text class="fw500">消息</text> <text class="color-gray"></text>
				</view>
				<view class="flex color-gray">
					<u-icon name="search"></u-icon>
					<view class="m-l10 color-gray">
						<u-icon name="trash"></u-icon>
						<text class="m-l10 fs28">清空未读</text>
					</view>
				</view>
			</view>
		</u-navbar>

		<!-- <view class="message-item" v-if="systemMsg && systemMsg.noticeId" @click="onSystemTap">
			<view class="message-item_img">
				<view v-if="false" class="unReadNum">0</view>
				<image src="/static/message-icon.png" class="avatar"></image>
			</view>
			<view class="message-item-content">
				<view class="message-item-title">
					<text>系统消息</text>
					<text class="time fs26 color-gray">{{systemMsg.createTime}}</text>
				</view>
				<view class="message-item-text">
					<text>{{systemMsg.noticeTitle}}</text>
				</view>
			</view>
		</view> -->
		<!-- <view class="message-item" v-else @click="onSystemTap">
			<view class="message-item_img">
				<view v-if="false" class="unReadNum">0</view>
				<image src="/static/message-icon.png" class="avatar"></image>
			</view>
			<view class="message-item-content">
				<view class="message-item-title">
					<text>系统消息</text>
					<text class="time fs26 color-gray">{{systemMsg.createTime}}</text>
				</view>
				<view class="message-item-text">
					<text>{{systemMsg.noticeTitle || ''}}</text>
				</view>
			</view>
		</view>
		<view class="message-item" v-if="offerMsg && offerMsg.noticeId" @click="onOfferMsgTap">
			<view class="message-item_img">
				<view v-if="false" class="unReadNum">0</view>
				<image src="/static/baojia-icon.png" class="avatar"></image>
			</view>
			<view class="message-item-content">
				<view class="message-item-title">
					<text>报价通知</text>
					<text class="time fs26 color-gray">{{offerMsg.createDate}}</text>
				</view>
				<view class="message-item-text">
					<text>{{offerMsg.content}}</text>
				</view>
			</view>
		</view>
		<view class="message-item" v-else @click="onOfferMsgTap">
			<view class="message-item_img">
				<view v-if="false" class="unReadNum">0</view>
				<image src="/static/baojia-icon.png" class="avatar"></image>
			</view>
			<view class="message-item-content">
				<view class="message-item-title">
					<text>报价通知</text>
					<text class="time fs26 color-gray">{{offerMsg.createDate}}</text>
				</view>
				<view class="message-item-text">
					<text>{{offerMsg.content || ''}}</text>
				</view>
			</view>
		</view> -->


		<!-- 消息接收 -->
		<view class="" v-for="(item,index) in chatList" :key="index" @click="goChat(item[index].info.from)">
			<view class="flex padding20 bg-white">
				<image src="../../static/avatar.png" mode="" class="w-100 h-100"></image>
				<view class="flex1 m-l20 w-300">
					<view class="fw">{{item[index].info.from}}</view>
					<view class="" v-for="(v,i) in item" :key="i">
						<view class="fs26 m-t10 text-box" v-if="i == item.length-1">{{v.msg.data[0].data}}</view>
					</view>
				</view>
				<view class="msg-box" if>{{item.length}}</view>
			</view>
			<view class="line-x"></view>
		</view>

		<!-- 会话列表 -->
		<view class="" v-for="(item,index) in conversationsList" :key="index" @click="goChat(item.conversationId)">
			<view class="flex padding20 bg-white">
				<image src="../../static/avatar.png" mode="" class="w-100 h-100"></image>
				<view class="flex1 m-l20 w-300">
					<view class="fw500">{{item.conversationId}}</view>

					<view class="fs26 m-t10 text-box">{{item.lastMessage.msg}}</view>
				</view>
				<view class="msg-box" v-if="item.unReadCount">{{item.unReadCount}}</view>
			</view>
			<view class="line-x"></view>
		</view>

	</view>
</template>

<script>
	let WebIM = require("../../utils/WebIM")["default"];
	let disp = require("../../utils/broadcast");
	import imUtil from '../../utils/imUtil';
	// import {
	// 	apiSysnoticeList,
	// 	apiSysnoticeQuotedPriceList
	// } from '@/service/index'


	export default {
		data() {
			return {
				chatList: [], // 消息列表
				onShowCount: 0,
				imChatListRes: null,
				conversationsList: [], // 会话列表
				unReadSpotNum: 0,
				systemMsg: {},
				offerNotice: {},
				offerMsg: {}
			}
		},
		onLoad() {

		},
		
		onShow() {
			let imToken = uni.getStorageSync('imToken')
			let imUserName = uni.getStorageSync('imUserName')
			imUtil.loginImBytoken(imUserName, imToken)

			
			
			this.getConversationsList()
			
			let that = this
			// 消息页面监听接收消息回调
			WebIM.conn.listen({
				onTextMessage(message) {
					console.log("消息页面监听接收消息回调：", message);
					
					setTimeout(()=>{
						that.getConversationsList()
					},1000)
				},
			})
		},
		mounted() {
			// this.getSysMsg()
			// this.getOfferList()

		},
		methods: {
			onOfferMsgTap() {
				uni.navigateTo({
					url: '/pages/message/offerNewsList'
				})
			},
			onSystemTap() {
				uni.navigateTo({
					url: '/pages/message/sysMsgList'
				})
			},
			sendPrivateText() {

			},
			// 获取会话列表和消息缓存
			getConversationsList(){
				let myUsername = uni.getStorageSync('myUsername')
				console.log('当前用户信息', myUsername);
				let res = uni.getStorageSync(myUsername)
				console.log('获取消息缓存', res);
				let keys = Object.keys(res)
				// 获取会话列表
				WebIM.conn.getServerConversations({
					pageSize: 50,
					cursor: ''
				}).then((res) => {
					console.log('获取会话', res)
					this.conversationsList = res.data.conversations
					this.chatList = this.filterArr(keys, this.conversationsList)
					
					console.log('会话列表',this.chatList);
				})
			},
			
			/**
			 * 获取系统消息
			 */
			getSysMsg() {
				apiSysnoticeList({
					pageNum: 0,
					pageSize: 1
				}).then(({
					data
				}) => {
					if (data && data.rows && data.rows.length > 0) {
						this.systemMsg = data.rows[0]
					}
				})
			},
			// 取报价消息
			getOfferList() {
				let params = {
					pageNum: 0,
					pageSize: 1
				}
				let userId = uni.getStorageSync('userId')
				if (userId) {
					params.userId = userId
				}
				apiSysnoticeQuotedPriceList(params).then(({
					data
				}) => {
					if (data && data.rows && data.rows.length > 0) {
						this.offerMsg = data.rows[0]
					}
				})
			},

			// 去聊天
			goChat(data) {
				uni.navigateTo({
					url: `/pages/msg/messageDetail?data=${data}`
				});
			},

			// 判断消息缓存与会话列表
			filterArr(msgArr, consArr) {
				console.log('msgArr', msgArr);
				console.log('consArr', consArr);


				let newArr = msgArr.map((it, idx) => {
					consArr.map((v, i) => {
						if (it.includes(v.conversationId)) {

						} else {
							return it
						}
					})
				}).filter(item => item !== undefined);
				console.log('newArr', newArr);
				return newArr
			},
			


		}
	}
</script>

<style lang="scss" scoped>
	.text-box {
		overflow: hidden;
		/* 确保超出的内容会被裁剪 */
		white-space: nowrap;
		/* 确保文本在一行内显示 */
		text-overflow: ellipsis;
		/* 超出的文本部分显示为省略号 */
	}

	.msg-box {
		width: 30rpx;
		height: 30rpx;
		background: #e13648;
		color: #fff;
		font-size: 24rpx;
		border-radius: 50%;
		line-height: 30rpx;
		text-align: center;
	}

	.message-item {
		height: 130upx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #F2F2F2;
		padding: 0upx 30upx;
		background: #fff;
	}

	.message-item_img {
		position: relative;
		width: 78rpx;
		height: 78rpx;
		margin-right: 16rpx;
		font-size: 0;

		image {
			width: 78rpx;
			height: 78rpx;
			border-radius: 20rpx;
		}
	}

	.message-item-content {
		flex: 1;
	}

	.message-item-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #000000;
	}

	.message-item-text {
		font-size: 26upx;
		color: #999999;
		margin-top: 10upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.message-item-text text {
		width: 516rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>